<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery监听页面滚动显示与隐藏</title>
  <!-- 线上资源 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-migrate/3.3.2/jquery-migrate.min.js"></script>
  <!-- 本地下载 -->
  <script>
    (function ($) {
      $.fn.isOnScreen = function () {
        var $win = $(window);
        var $elProps = {
          top: $win.scrollTop(),
          left: $win.scrollLeft()
        };

        $elProps.right = $elProps.left + $win.width();
        $elProps.bottom = $elProps.top + $win.height();

        var offset = this.offset();
        return offset.right = offset.left + this.outerWidth(),
          offset.bottom = offset.top + this.outerHeight(),
          !($elProps.right < offset.left || $elProps.left > offset.right || $elProps.bottom < offset.top || $elProps.top > offset.bottom)
      };

      $(window).load(function () {
        (function animLoop() {
          requestAnimationFrame(animLoop);

          $('[data-animate-in]').each(function () {
            var item = $(this);
            item.toggleClass('in-view', item.isOnScreen());
          });
        })();
      })

    })(jQuery);
  </script>
  <style>
    .in-view {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
    }

    [data-animate-in] {
      opacity: 0;
      transition: transform .5s ease-out, opacity .5s ease-out;
    }

    [data-animate-in].delay {
      transition-delay: .5s;
    }

    [data-animate-in=up] {
      transform: translate3d(0, 4rem, 0);
    }

    [data-animate-in=down] {
      transform: translate3d(0, -4rem, 0);
    }

    [data-animate-in=right] {
      transform: translate3d(4rem, 0, 0);
    }

    [data-animate-in=left] {
      transform: translate3d(-4rem, 0, 0);
    }
  </style>
</head>

<body>
  <div style="width: 1000px; margin: auto;text-align:center">
    <div style="height:600px;width: 100%;background-color: cadetblue;" data-animate-in="dowm">
      000
    </div>
    <div style="height:600px;width: 100%;background-color: rgb(103, 240, 12);" data-animate-in="up">
      111
    </div>

    <div style="height:600px;width: 100%;background-color: cadetblue;" data-animate-in="up">
      222
    </div>
    <div style="height:600px;width: 100%;background-color: rgb(224, 155, 91); display:flex;" data-animate-in="up">
      <div class="in-view" style="height:600px;width:500px;background-color: rgb(109, 108, 47);" data-animate-in="left">
        333
      </div>
      <div class="in-view" style="height:600px;width:500px;background-color: rgb(199, 16, 123);"
        data-animate-in="right">
        444
      </div>
    </div>
    <div style="height:600px;width: 100%;background-color: cadetblue;" data-animate-in="up">
      555
    </div>

  </div>

</body>

</html>